<template>
	<div class="content" v-if="is_show == 0">
		<div class="content-top">
			电池管理_电池详情
		</div>
		<div class="car-title">
			<div class="car-title-left">基本信息</div>
			<div class="car-title-right" @click="onEdit"><i class="el-icon-edit"></i>修改</div>
		</div>
		<div class="car-detail">
			<el-row>
				<el-col :span="8">名称：{{detail.code}}</el-col>
				<el-col :span="8">活动编号：{{detail.code}}</el-col>
                <el-col :span="8">活动类型：{{detail.type}}</el-col>
			</el-row>
            <el-row>
				<el-col :span="8">活动开始时间：{{detail.startTime}}</el-col>
				<el-col :span="8">活动结束时间：{{detail.endTime}}</el-col>
                <el-col :span="8">持续时间：<!-- {{detail.batteryCabinCode}} -->10天</el-col>
			</el-row>
            <el-row>
				<el-col :span="8">状态：{{detail.status}}</el-col>
				<el-col :span="8">活动是否显示：{{detail.isShown}}</el-col>
         
			</el-row>
		</div>
        <div class="car-title">
			<div class="car-title-left">活动规则描述</div>
		</div>
		<div class="car-detail">
			 <el-row>
                <el-col :span="24">
                    <label>活动宣传图：</label>
                    <el-image fit="contain" :src="detail.picUrl" alt=""></el-image>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <label>规则描述：</label>
                    <MavonEditor :html="detail.description" :disabled="true" @editorHtml="editorHtml"></MavonEditor>
                </el-col>
            </el-row>
		</div>
		 <!-- <div class="car-title center-button">
			<center>
				<el-button type="primary">确认编辑</el-button>
			</center>
		</div> -->
		<div class="car-title">
			<div class="car-title-left">活动条件</div>
			<div class="car-title-right" @click="onEdit"><i class="el-icon-edit"></i>修改</div>
		</div>
		<div class="car-detail" v-if="detail.type == 2">
             <el-row>
                 <el-col :span="24">订单类型：换电订单</el-col>
             </el-row>
             <el-row>
                 <el-col :span="24">满100减30</el-col>
             </el-row>
        </div>
        <div class="car-detail" v-if="detail.type == 3">
             <el-row>
                 <el-col :span="24">订单类型：充值订单</el-col>
             </el-row>
             <el-row>
                 <el-col :span="24">满100送30</el-col>
             </el-row>
        </div>
        <div class="car-detail" v-if="detail.type == 1">
             <el-row>
                 <el-col :span="24">参与赠送优惠券</el-col>
             </el-row>
             <el-row>
                 <el-col :span="24">

                 </el-col>
             </el-row>
			 <el-row>
				 <el-col :span="24">
					  <el-button type="primary" @click="preview">查看问卷</el-button>
                 </el-col>
			 </el-row>
        </div>
        <div class="car-detail" v-if="detail.type == 0">
             <el-row>
                 <el-col :span="24">优惠券直领</el-col>
             </el-row>
             <el-row>
                 <!-- <el-col :span="12">
                       <div class="coupon_list">
                            <div class="coupon_bg" v-for="(item,idx) in conditionVal.list" :key="idx">
                                <img src="@/assets/img/coupon.png" alt="">
                                <div class="condition_text">
                                    <div><strong>{{item.minPoint}}</strong>元</div>
                                    <div>订单满{{item.amount}}元</div>
                                    <div>每人限领{{item.num}}张</div>
                                </div>
                            </div>
                        </div>
                 </el-col> -->
				  
             </el-row>
        </div>
        <div class="car-title center-button">
			<center>
				<el-button type="primary" @click="activityOver">结束</el-button>
				<el-button type="primary" @click="onBack"><i class="el-icon-back"></i>返回</el-button>
				<el-button type="primary" @click="handleClick1(id)">删除</el-button>
			</center>
		</div>
		
	</div>
	<ActivityEdit v-else-if="is_show == 1" @isEdit="isEdit" :detail="detail"></ActivityEdit>
	<QuestionnairePreview v-else @questionnaire="questionnaire" :questionId="id"></QuestionnairePreview>
</template>

<script>
import MavonEditor from '@/components/mavon-editor.vue'
import ActivityEdit from '@/components/activity/ActivityEdit.vue'
import QuestionnairePreview from '@/components/activity/QuestionnairePreview.vue'
	export default{
		props:['id'],
		components:{
		   MavonEditor: MavonEditor,
		   ActivityEdit:ActivityEdit,
		   QuestionnairePreview: QuestionnairePreview
		},
		data(){
			return{
			   detail:'',
			   markdownHtml:'',
			   activityDetail:[],
			   is_show:0,
			}
			
		},
		created() {
		},
		mounted() {
            this.get_detail()
            this.get_activity_detail()
		},
		methods:{
			onEdit(){
				this.is_show = 1
			},
			questionnaire(val){
                 if(val != 1){
                //    this.questionId = val
                }
                this.is_show = 0
            },
			isEdit(){
				// this.is_edit = false
				this.is_show = 1
			},
            editorHtml(val){
                  this.markdownHtml = val
            },
			textConversion(idx){
				for(let item of this.batteryPosition){
					if(item.id == idx){
                      return item.name
					}
				}
			},
			preview(){
               this.is_show = 2
			},
			activityOver(){
				/* var self = this;
				this.$axios.post(this.$global.serverIp + 'frontend/activity/saveOrUpdate',{
				"name":self.info.name,
				"code":self.info.code,
				"status":self.info.status,
				"type":3,
				"isShown":self.info.isShow,
				"activityRulesIds":activityRulesIds,
				"picUrl":self.info.imgUrl,
				"description":self.info.markdownHtml
				}).then(function (res) {
						if(res != ''){
							self.$popup.open('添加成功')
							self.$emit('addActivity',2)
						}
				}) */
			},
			/* 获取详情 */
			get_detail(){
				var self = this
                this.$axios.get(this.$global.serverIp + 'frontend/activity/detail/' + this.id)
					.then(function(res) {
						if (res != '') {
						
							self.detail = res.data
						}
				
					})
            },
            /* 获取活动详情 */
            get_activity_detail(){
				var self = this
                this.$axios.post(this.$global.serverIp + 'frontend/activityRules/findPage' ,{
					"activityId":self.id,
					'page':1,
					'limit':100
				})
					.then(function(res) {
						if (res != '') {
						   self.activityDetail = res.data.list[0].conditionContent
						   console.log(JSON.parse(self.activityDetail))
						}
				
					})
            },
			/* 返回 */
			onBack(){
				this.$emit('addActivity')
			},
			 handleClick1(id){
			  var self = this;
				this.$confirm('此操作将删除该设备, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					$.ajax({
						url: Global.serverIp + 'frontend/activity/delete',
						data: '["' + id + '"]',
						xhrFields: {
							withCredentials: true
						},
						beforeSend : function(request) {
							request.setRequestHeader("Authorization", 'Bearer '+localStorage.getItem('token'));
						},
						contentType: 'application/json;charset=utf-8',
						dataType: 'json',
						type: 'delete',
						success: function(res) {
							if (res.code == Global.success_code) {
								console.log(res);
								self.$popup.open("删除成功");
								self. get_activity_list();
							} else {
								self.$popup.open(res.msg);
							}
						},
						error: function(res) {
							if(res.responseJSON.code == '040005'){
								self.$popup.open("登录过期");
							}else{
								self.$popup.open("请求失败");
							}
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
		  },
		}
	}
</script>

<style>
	.car-title {
		margin: 26px 0px 0px 30px;
		overflow: hidden;
		font-size: 16px;
        width: 1088px;
	}
	
	.car-title-left {
		float: left;
		color: #606B82;
		margin-bottom: 16px;
	}
	
	.car-title-right {
		float: right;
		color: #FD943F;
		margin-bottom: 10px;
	}
	
	.car-title-right:hover {
		cursor: pointer;
		opacity: 0.3;
	}
	
	.car-detail {
		width: 1088px;
		/* height: 300px; */
		background-color: #F2F6FA;
		border: 1px solid #C9CDD1;
		padding-left: 30px;
		box-sizing: border-box;
		margin-left: 30px;
		padding-top: 40px;
	}
	.car-detail-table{
		width: 1088px;
		height: 300px;
		overflow: auto;
		background-color: #F2F6FA;
		border: 1px solid #C9CDD1;
		margin-left: 30px;
	}
	.car-table-page{
		width: 1088px;
		height: 300px;
	}
	.car-detail .el-row {
		margin-bottom: 30px;
		font-size: 14px;
		color: #2D384C;
	}
	.application-reason{
		display: flex;
		align-items: flex-start;
	}
	.center-button{
		padding-bottom: 30px;
	}
	.condition-text{
        margin-left: 10px;
    }
    .coupon_bg{
        width: 200px;
        height: 140px;
        position: relative;
        font-size: 12px;
        text-align: center;
        line-height: 20px;
        color: #fff;
        margin-right: 20px;
    }
    .coupon_bg img{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .coupon_list{
        /* display: flex; */
    }
    .condition_text{
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0,-50%);
        width: 80%;
    }
    strong{
        font-size: 26px;
        font-weight: 300;
        margin-right: 4px;
    }
</style>

